<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>居家养老服务详情</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f8f8f8;
            color: #333;
            max-width: 750px;
            margin: 0 auto;
        }
        .swiper-slide {
            height: 300px;
            background-size: cover;
            background-position: center;
        }
        .tab-active {
            color: #ff4d4f;
            border-bottom: 2px solid #ff4d4f;
        }
        .service-item {
            transition: all 0.3s ease;
        }
        .service-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .fixed-bottom-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            max-width: 750px;
            margin: 0 auto;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        }
        .scroll-container {
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .scroll-container::-webkit-scrollbar {
            display: none;
        }
        .nav-tab.active {
            color: #2563eb;
            position: relative;
        }
        .nav-tab.active::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 24px;
            height: 3px;
            background-color: #2563eb;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <header class="bg-white py-4 px-6 shadow-sm">
        <div class="flex items-center relative">
            <a href="service-list.html" class="text-gray-600 absolute left-0 z-10">
                <i class="fas fa-chevron-left text-lg"></i>
            </a>
            <h1 class="text-xl font-semibold text-center flex-1">服务详情</h1>
            <a href="#" class="text-gray-600 absolute right-0 z-10">
                <i class="fas fa-share-alt text-lg"></i>
            </a>
        </div>
    </header>

    <!-- 内容区域 -->
    <div class="pt-16 pb-24">
        <!-- Banner区 -->
        <div class="relative">
            <div class="swiper-slide bg-gray-200 rounded-lg">
                <img src="https://s.coze.cn/image/s3lfVvGWNtM/" alt="居家养老服务" class="w-full h-full object-cover">
            </div>
            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-4 text-white rounded-b-lg">
                <h1 class="text-xl font-bold mb-1">专业居家养老护理服务</h1>
                <div class="flex items-center justify-between">
                    <div>
                        <span class="text-2xl font-bold text-white">¥198</span>
                        <span class="text-sm ml-1">/次</span>
                    </div>
                    <div class="flex items-center">
                        <i class="fas fa-star text-yellow-400 mr-1"></i>
                        <span class="font-medium">4.8</span>
                        <span class="text-sm ml-1">(128人评价)</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 服务导航标签 -->
        <div class="bg-white mt-4 px-4">
            <div class="flex overflow-x-auto scroll-container">
                <button class="tab-active px-4 py-3 font-medium whitespace-nowrap">服务介绍</button>
                <button class="px-4 py-3 font-medium text-gray-600 whitespace-nowrap">服务内容</button>
                <button class="px-4 py-3 font-medium text-gray-600 whitespace-nowrap">用户评价</button>
                <button class="px-4 py-3 font-medium text-gray-600 whitespace-nowrap">服务须知</button>
            </div>
        </div>

        <!-- 内容展示区 - 服务介绍 -->
        <div class="bg-white mt-2 p-4">
            <h2 class="text-lg font-bold mb-3">服务简介</h2>
            <p class="text-gray-600 mb-4">专业护理人员上门为老年人提供全方位生活照料和健康护理服务，包括个人卫生清洁、饮食照料、健康监测等，让老人足不出户享受专业养老服务。</p>
            
            <div class="grid grid-cols-2 gap-4 mb-4">
                <div class="flex items-center">
                    <i class="fas fa-clock text-blue-500 mr-2"></i>
                    <span class="text-gray-600">服务时长: 3小时</span>
                </div>
                <div class="flex items-center">
                    <i class="fas fa-user-friends text-blue-500 mr-2"></i>
                    <span class="text-gray-600">适用人群: 60岁以上老人</span>
                </div>
            </div>
            
            <h2 class="text-lg font-bold mb-3 mt-6">工具说明</h2>
            <p class="text-gray-600">服务人员将携带专业护理工具包，包括血压计、体温计、消毒用品等基础医疗设备，以及个人清洁用品。</p>
        </div>

        <!-- 相关推荐 -->
        <div class="mt-6 px-4">
            <h2 class="text-lg font-bold mb-3">相关服务推荐</h2>
            <div class="flex overflow-x-auto scroll-container space-x-3 pb-3">
                <div class="service-item flex-shrink-0 w-40 bg-white rounded-lg overflow-hidden shadow">
                    <img src="https://s.coze.cn/image/AwOScDR8eGg/" alt="康复护理" class="w-full h-24 object-cover">
                    <div class="p-2">
                        <h3 class="text-sm font-medium line-clamp-1">康复护理服务</h3>
                        <div class="flex items-center mt-1">
                            <span class="text-red-500 font-bold">¥168</span>
                            <span class="text-xs text-gray-500 ml-1">/次</span>
                        </div>
                    </div>
                </div>
                <div class="service-item flex-shrink-0 w-40 bg-white rounded-lg overflow-hidden shadow">
                    <img src="" alt="助浴服务" class="w-full h-24 object-cover">
                    <div class="p-2">
                        <h3 class="text-sm font-medium line-clamp-1">专业助浴服务</h3>
                        <div class="flex items-center mt-1">
                            <span class="text-red-500 font-bold">¥128</span>
                            <span class="text-xs text-gray-500 ml-1">/次</span>
                        </div>
                    </div>
                </div>
                <div class="service-item flex-shrink-0 w-40 bg-white rounded-lg overflow-hidden shadow">
                    <img src="https://s.coze.cn/image/LRTXOnIRxoc/" alt="陪诊服务" class="w-full h-24 object-cover">
                    <div class="p-2">
                        <h3 class="text-sm font-medium line-clamp-1">医院陪诊服务</h3>
                        <div class="flex items-center mt-1">
                            <span class="text-red-500 font-bold">¥158</span>
                            <span class="text-xs text-gray-500 ml-1">/次</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部固定栏 -->
    <div class="fixed-bottom-bar bg-white p-3 flex items-center z-50">
        <button class="flex-1 flex items-center justify-center text-gray-600">
            <i class="fas fa-comment-dots text-xl mr-2"></i>
            <span>咨询</span>
        </button>
        <button class="flex-1 bg-red-500 text-white py-3 rounded-lg font-bold ml-3">
            立即预约
        </button>
    </div>

    <script>
        // 标签切换功能
        const tabs = document.querySelectorAll('.flex button');
        const contentSections = [
            document.querySelector('.bg-white.mt-2.p-4'), // 服务介绍
            // 其他内容区域可以通过类似方式获取
        ];

        tabs.forEach((tab, index) => {
            tab.addEventListener('click', () => {
                // 移除所有标签的激活状态
                tabs.forEach(t => {
                    t.classList.remove('tab-active');
                    t.classList.add('text-gray-600');
                });
                
                // 添加当前标签的激活状态
                tab.classList.add('tab-active');
                tab.classList.remove('text-gray-600');
                
                // 这里可以添加切换内容区域的逻辑
                // 例如: contentSections.forEach((section, i) => {
                //     section.style.display = i === index ? 'block' : 'none';
                // });
            });
        });

        // 预约按钮点击事件
        const bookBtn = document.querySelector('.bg-red-500');
        bookBtn.addEventListener('click', () => {
            // alert('预约功能将在小程序中实现');
            window.location.href = 'elderly-appointment.html';
        });
    </script>
</body>
</html>